<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义CSS以增强视觉效果 -->
    <style>
        /* 你的自定义样式 */
    </style>
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">用户列表 <a href="/addUser" class="btn btn-success mb-4">添加用户</a> </h1>
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user : ${users}">
                <td th:text="${user.userID}">User ID</td>
                <td th:text="${user.userName}">User Name</td>
                <td th:text="${user.userEmail}">User Email</td>
                <td class="action-buttons">
                    <a th:href="@{'/viewUser/' + ${user.userID}}" class="btn btn-info btn-sm">查看</a>
                    <a th:href="@{'/editUser/' + ${user.userID}}" class="btn btn-primary btn-sm">编辑</a>
<!--                    <a href="javascript:void(0);" class="btn btn-danger btn-sm delete-btn"-->
<!--                       th:data-user-id="${user.userID}"-->
<!--                       th:data-user-name="${user.userName}"-->
<!--                       th:onclick="'confirmDelete(event, \'' + ${user.userID} + '\', \'' + ${user.userName} + '\')'">删除</a>-->
<!--                    <a href="javascript:void(0);" class="btn btn-danger btn-sm delete-btn"-->
<!--                       th:delete-user-id="${user.userID}">删除</a>-->
                    <a href="javascript:void(0);" class="btn btn-danger btn-sm delete-btn"
                       th:delete-user-id="${user.userID}"
                       th:delete-user-name="${user.userName}">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                <a class="page-link" th:href="@{'?page=' + (${currentPage} - 1) + '&size=' + ${size}}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}"
                th:classappend="${currentPage == i} ? 'active' : ''">
                <a class="page-link" th:href="@{'?page=' + ${i} + '&size=' + ${size}}"><span th:text="${i + 1}"></span></a>
            </li>
            <li class="page-item" th:classappend="${currentPage+1 == totalPages} ? 'disabled' : ''">
                <a class="page-link" th:href="@{'?page=' + (${currentPage} + 1) + '&size=' + ${size}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<!-- Bootstrap JS and dependencies -->
<script src="/static/js/jquery-3.5.1.slim.min.js"></script>
<script src="/static//js/popper.min.js"></script>
<script src="/static//js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function(event) {
            var userId = this.getAttribute('delete-user-id');
            console.log("Delete button clicked with userId:", userId);
            var userName = this.getAttribute('delete-user-name');
            console.log("Delete button clicked with userName:", userName);
            confirmDelete(event, userId,userName); // 调用删除确认函数
        });
    });
});


function confirmDelete(event, userId,userName) {
    console.log("confirmDelete called with userId:", userId);
    console.log("confirmDelete called with caohx  userName:", userName);
    event.preventDefault();
  var confirmed = confirm(`确定要删除用户：${userName}吗？`);
<!--    var confirmed = confirm('确定要删除用户‘+ userName +‘吗？');-->
    if (confirmed) {
        console.log(`Attempting to delete user ${userId}`);
        fetch(`/user/${userId}`, {
            method: 'DELETE',
        })
        .then(response => {
            console.log("Fetch response received:", response);
            if (!response.ok) {
                return response.json().then(data => { throw new Error(data.message || "用户删除失败"); });
            }
            return response.json();
        })
        .then(data => {
            alert("用户信息删除成功");
            window.location.href = "/userManage"; // 成功后重定向到用户管理页面
        })
        .catch(error => {
            console.error('Error:', error);
            alert(error.message); // 显示具体的错误信息
        });
    }
}
</script>
</body>
</html>